<template>
	<view class="outside" :style="cssProps">
		<view class="colorful"></view>
		<text class="title" :style="cssProps2">{{title}}</text>
		<text class="more" v-if="showMore" @click="handlerClick">{{moreText?moreText:'更多'}}</text>
		<image v-if="showMore" src="../../static/guided_icon_more@2x.png"></image>
	</view>
</template>

<script>
	export default {
		props: {
			code: Number,
			textColor: String,
			color: String,
			title: String,
			showMore: Boolean,
			type: String,
			moreText: String,
		},
		// data() {
		// 	return {
		// 		txtColor: '#333'
		// 	}
		// },
		// onLoad() {
		// 	console.log('onload'+this.textColor)
		// 	if (this.textColor) {
		// 		this.txtColor = this.textColor
		// 	}
		// },
		methods: {
			handlerClick() {
				if (this.code) {
					this.$emit('goTo', this.type, this.code)
				} else {
					this.$emit('goTo', this.type)
				}
			}
		},
		computed: {
			cssProps() {
				let params = {}
				if (this.showMore) {
					params['--justify-content'] = 'space-between'
				} else {
					params['--justify-content'] = 'flex-start'
				}
				params['--background-color'] = this.color
				return params
			},
			cssProps2() {
				if (this.textColor) {
					return {
						'--text-color': this.textColor
					}
				}
				return {
					'--text-color': '#333'
				}
			},
		}
	}
</script>

<style>
	.outside {
		height: auto;
		line-height: 80rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: var(--justify-content);
	}

	.colorful {
		background: var(--background-color);
		height: 40rpx;
		width: 20rpx;
		/* margin-left: 20rpx; */
		border-radius: 5rpx;
	}

	.title {
		width: calc(100% - 160rpx);
		font-size: 32rpx;
		font-weight: bolder;
		color: var(--text-color);
		margin-left: 10rpx;
	}

	.more {
		color: #999;
		font-size: 24rpx;
		/* margin-right: 0rpx; */
	}

	.content image {
		height: 30rpx;
		width: 30rpx;
		/* margin-right: 10rpx; */
	}
</style>
